<template>
  <div class="verify">
    <div class="title">为了您的账户安全，请先进行安全验证</div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="0px"
      status-icon
    >
      <el-form-item prop="mobile">
        <el-input
          :prefix-icon="Iphone"
          placeholder="请输入邮箱"
          size="large"
          v-model="ruleForm.mobile"
        />
      </el-form-item>

      <el-form-item prop="code">
        <div class="flex wh">
          <el-input
            class="mr-lg"
            :prefix-icon="Key"
            placeholder="请输入验证码"
            size="large"
            v-model="ruleForm.code"
          />
          <el-button
            v-if="count <= 0"
            size="large"
            class="flex-1"
            type="primary"
            :loading="countLoading"
            @click="() => setCountDown(60, ruleForm.mobile,1)"
            >获取验证码</el-button
          >
          <el-button v-else size="large" class="flex-1" type="primary" disabled
            >{{ count }}s后重新获取</el-button
          >
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          @click="handleNext"
          size="large"
          class="wh"
          type="primary"
          >下一步</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { Iphone, Key } from "@element-plus/icons-vue";
import { useLoginHook } from "@/hooks/useSendVerificationCode.js";
import { deepClone } from "@/utils/index";
const { count, countLoading, setCountDown } = useLoginHook();
const { proxy } = getCurrentInstance();
const emit = defineEmits(["change"]);
const ruleForm = ref({
  checkType:0
});
const ruleFormRef = ref();
const loading = ref(false);
const handleNext = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      const params = {
        url: "/sms/checkCode",
        params: deepClone(ruleForm.value),
      };

      loading.value = true;
      proxy.$get(params).then(
        (res) => {
          proxy.$mitt.emit("formEvent", params.params);
          emit("change");
          loading.value = false;
        },
        () => {
          loading.value = false;
        }
      );
    }
  });
};
const rules = ref({
  mobile: [
    {
      required: true,
      message: "请输入邮箱",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
});
</script>
<style lang="less" scoped>
.verify {
  margin-top: 70px;
  .title {
    font-size: 14px;
    color: #575757;
    margin-bottom: 50px;
  }
}
</style>